/**
 * Created by xxx on 2017年12月4日.
 * 组件相关的模版
 */
var currentpage = 1,totlepage = 1,i;
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            navigation: '模版',//导航内容
            tableData: [],
            showImg: false,
            imgUrl:'',
        }
    },
    componentDidMount: function () {
        suixun.hideLoding();//显示加载中
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($("#businessQuery").is(":focus")){

                }
            }
        });
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
    },
    /**
     * 关闭图片
     * @returns {XML}
     */
    closeImg: function(){
        document.querySelector('#file').value = '';
        this.setState({showImg:false,imgUrl:'',updateImg:true});
    },
    /**
     * 加载图片
     * @returns {XML}
     */
    imgLoad: function () {
        new Viewer(document.querySelector('#showImg'));//调用图片
    },
    /**
     * 选择图片
     */
    onChangFile: function () {
        var svar = this;
        var fileUrl = $("#file").val().split('\\');//注split可以用字符或字符串分割
        console.log($("#file").val());
        var fileName = fileUrl[fileUrl.length-1];//这就是要取得的图片名称
        var fileLat = fileName.substring( fileName.lastIndexOf('.')+1 );//后缀名称
        if(fileLat == "png" || fileLat == "jpg" || fileLat == "gif" || fileLat == "svg"){
            // var docObj = $("#file"),src ='';
            // src = window.URL.createObjectURL(docObj[0].files[0]);
            // // 图片地址 后面加时间戳是为了避免缓存
            // var img_url = src;
            // // 创建对象
            // var img = new Image();
            // // 改变图片的src
            // img.src = img_url;
            // // 加载完成执行
            // img.onload = function(){
            //     // 打印
            //     // alert('width:'+img.width+',height:'+img.height);
            //     //限制图片大小
            //     // if((img.width==1125&&img.height==450)||(img.width==750&&img.height==300)){
            //         svar.setState({showImg: true, imgUrl: src});
            //     // }else{
            //     //     suixun.alert("图片大小错误！");
            //     // }
            // };
            suixun.getImgInfo('file',function (imgInfo) {
                if(imgInfo.size>5*1024*1024){
                    suixun.alert("图片不能大于5M！");
                }else if(imgInfo.width!=imgInfo.height){
                    suixun.alert("图片格式不对！");
                }else{
                    this.setState({showImg: true, imgUrl: imgInfo.src});
                }
            }.bind(this));
        }else{
            suixun.alert("请选择图片文件上传!",function (data) {
                if(data){
                    $("#file").val("");
                    svar.setState({showImg:false,imgUrl:''});
                }
            });
        }
    },
    render: function () {
        var Tabels;
        return (
            <div className="tableManage-body">
                <header style={this.state.navigation!=''?{display:'block'}:{display:'none'}}>
                    <div className="header-left">
                        <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>商户审核</div>
                        <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' >表单组件<span>>{this.state.navigation}</span></div>
                    </div>
                </header>
                <header style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                    <div className="header-left">
                        <div className="header-left-studentInfo">
                            <a href="./businessManager.html" className="header-left-button menu-width ">商户列表</a>
                            <a href="./businessExamine.html" className="header-left-button showOrder" >商户审核</a>
                        </div>
                    </div>
                    <div className="header-right">
                        <div className="header-query retrieval">
                            <div className="header-query-input">
                                <input className="query-value enterEvent" type="text" id="businessQuery" maxLength="11" placeholder="请输入商户手机号"/>
                            </div>
                            <div className="header-query-img"  />
                        </div>
                    </div>
                </header>
                <div className="tableInfo" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                <th style={{width: '5%'}}>序号</th>
                                <th style={{width: '25%'}}>商户名</th>
                                <th style={{width: '20%'}}>登录手机号</th>
                                <th style={{width: '20%'}}>操作</th>
                                <th style={{width: '20%'}}>提交审核时间</th>
                                <th style={{width: '20%'}}>备注</th>
                                </thead>
                                <tbody>
                                {this.state.tableData==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                <div className="body-updateAttendance" style={this.state.navigation!=''?{display:'block'}:{display:'none'}}>
                    <div className="body-content">
                        <div className="body-content-title">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</div>
                        <div className="body-content-text">
                            <div className="content-border">
                                <input type="text" id="deviceName" className="input-content" placeholder="请填写考勤机名称" maxLength="200"/>
                            </div>
                        </div>
                    </div>
                    <div className="body-content">
                        <div className="body-content-title">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</div>
                        <div className="body-content-text">
                            <div className="content-border">
                                <input type="text" id="deviceCode" className="input-content" placeholder="请填写考勤机编号" maxLength="200"/>
                            </div>
                        </div>
                    </div>
                    <div className="body-content">
                        <div className="body-content-title">生产厂商：</div>
                        <div className="body-content-text">
                            <div className="content-border">
                                <input type="text" id="factoryCode" className="input-content" placeholder="请填写考勤机生产厂商" maxLength="200"/>
                            </div>
                        </div>
                    </div>
                    {
                        /**
                         * 单行文本框
                         */
                    }
                    <div className="body-content">
                        <div className="body-content-title">投放学校：</div>
                        <div className="body-content-text">
                            <div className="content-border">
                                <input type="text" id="deliverySchoolName" className="input-content" placeholder="请填写考勤机投放学校" maxLength="200"/>
                            </div>
                        </div>
                    </div>
                    {
                        /**
                         * 多行文本框
                         */
                    }
                    <div className="body-content">
                        <div className="body-content-title">投放学校：</div>
                        <div className="body-content-text">
                            <div className="content-border content-textarea">
                                <textarea type="text" className="textarea-content" placeholder="请填写考勤机投放学校" maxLength="500"/>
                            </div>
                        </div>
                    </div>
                    {
                        /**
                         * 单选框
                         */
                    }
                    <div className="body-content">
                        <div className="body-content-title">使用对象</div>
                        <div className="body-content-text">
                            <div className='menu-radio-list select'><span>家长</span></div>
                            <div className='menu-radio-list'><span>老师</span></div>
                        </div>
                    </div>
                    {
                        /**
                         * 时间
                         */
                    }
                    <div className="body-content">
                        <div className="body-content-title" >定时展示</div>
                        <div className="body-content-text">
                            <div className="content-border content-time" >
                                <input type="text" className="input-content input-time" id="bannerStateTime" placeholder="请选择开始时间" maxLength="50" />
                            </div>
                            <span className="content-time-line"/>
                            <div className="content-border content-time" >
                                <input type="text" className="input-content input-time" id="bannerEndTime"  placeholder="请选择结束时间" maxLength="50" />
                            </div>
                        </div>
                    </div>
                    {
                        /**
                         * 引入主键
                         */
                    }
                    <Address />
                    <div className="body-content">
                        <div className="body-content-title" style={{backgroundPosition: '64px 3px'}}>banner图</div>
                        <div className="body-content-text content-file">
                            <form name="excelInputForm" className="input-from" id="excelInputFrom" method="post">
                                <input type="hidden" className="input-fileImg" name="filename"  />
                                <a href="javascript:;" className="file">
                                    上传图片
                                    <input type="file" name="file" onChange={this.onChangFile.bind(this)}  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="file" />
                                </a>
                            </form>
                            {
                                this.state.showImg==true?
                                    <div className="upload-show-img">
                                        <span onClick={this.closeImg.bind(this)}/>
                                        <lable><img onLoad={this.imgLoad.bind(this)} src={this.state.imgUrl} id="showImg"  /></lable>
                                    </div>:''
                            }
                            <span className="inputFile-remarks">图片规格：1125像素*450像素或750像素*300像素</span>
                        </div>
                    </div>
                    <div className="body-content" >
                        <div className="body-content-title">使用状态：</div>
                        <div className="body-content-text">
                            <div className="content-select-border">
                                <select className="export-factory msgType " id="deviceStatus">
                                    <option value="true" >启用</option>
                                    <option value="false" >停用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="body-content">
                        <span className="body-svae" >保存</span>
                    </div>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
/**
 * 获取行政区域组件开始
 * @type {*}
 */
var Address=React.createClass({
    getInitialState:function () {
        return{
            provinceData:[],
            cityData:[],
            countyData:[]
        };
    },
    queryAddress:function (num,province,city) {
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+num+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            if(data.code == 200){
                if(num == "1"){
                    var provinceData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        provinceData[i] = {value:data.info[i].province};
                    }
                    svar.setState({provinceData:provinceData});
                }else if(num == "2"){
                    var cityData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        cityData[i] = {value:data.info[i].city};
                    }
                    svar.setState({cityData:cityData});
                }else{
                    var countyData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        countyData[i] = {value:data.info[i].town};
                    }
                    svar.setState({countyData:countyData});
                }
            }
        });
    },
    //查询省份
    queryProvince:function () {
        if($("#province").find(".body-address-content-selectData").css('display')=='none'&&this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','block');
            $("#city").find(".body-address-content-selectData").css('display','none');
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }else if(this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(1,"","");
        $("#province").find(".body-address-content-selectData").css('display','block');
    },
    queryCity:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#city").find(".body-address-content-selectData").css('display')=='block'){
            $("#city").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(2,$(".span-provinceid").html(),"");
        $("#city").find(".body-address-content-selectData").css('display','block');
        $("#county").find(".body-address-content-selectData").css('display','none');
    },
    queryCounty:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#cityid").next().html()=='选择地区'||$("#city").find(".body-address-content-selectData").css('display')=='block'
            ||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#county").find(".body-address-content-selectData").css('display')=='block'){
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(3,"",$(".span-cityid").html());
        $("#county").find(".body-address-content-selectData").css('display','block');
    },
    render:function () {
        return(
            <div className="body-content">
                <span className="body-content-title" >地区</span>
                <div className="body-address-contents">

                    <div className="body-address-content" id="province">
                        <input type="hidden" id="provinceid"/>
                        <span className="body-address-content-default text-sub span-provinceid" title="" onClick={this.queryProvince}>选择省份</span>
                        <AddressData type="1" resultData={this.state.provinceData}/>
                    </div>
                    <div  id="city" className="body-address-content">
                        <input type="hidden" id="cityid"/>
                        <span className="body-address-content-default text-sub span-cityid" title="" onClick={this.queryCity}>选择地区</span>
                        <AddressData type="2"  resultData={this.state.cityData}/>
                    </div>
                    <div id="county" className="body-address-content">
                        <input type="hidden" id="countyid" value="" data-dataType="Number" data-require="true" data-msg="地区不能为空"/>
                        <span className="body-address-content-default text-sub span-countyid" title="" onClick={this.queryCounty}>选择县或街道</span>
                        <AddressData type="3"  resultData={this.state.countyData}/>
                    </div>
                    <div className="content-border adress-details">
                        <input type="text" id="adressDetails" className="input-content" placeholder="请填写详细地址" maxLength="100"/>
                    </div>
                </div>
            </div>
        );
    }
});
/**
 * 省市区组装下拉列表
 * @type {*}
 */
var AddressData = React.createClass({
    componentDidMount:function () {
        $('.body-address-content').hover(function () {
        },function () {
            $('.body-address-content-selectData').css('display','none');
        });
    },
    handleClick:function (e) {
        if($(e.target).attr("data-type")=="1"){
            $("#city").find(".body-address-content-default").html('选择地区');
            $("#county").find(".body-address-content-default").html('选择县或街道');
            this.setState({cityData:[],countyData:[]});
        }else if($(e.target).attr("data-type")=="2"){
            this.setState({countyData:[]});
            $("#county").find(".body-address-content-default").html('选择县或街道');
        }
        $(e.target).parent().prev().html(e.target.innerHTML);
        $($(e.target).parent().prev()).attr("title",e.target.innerHTML);
        $(e.target).parent().prev().prev().val(e.target.innerHTML);
        $($(e.target).parent()).hide();
    },
    render:function () {
        var svar = this;
        var resultDATA=this.props.resultData.map(function (value,index) {
            return(
                <span onClick={svar.handleClick} data-type={svar.props.type} >{value.value}</span>
            );
        });
        return(
            <div className="body-address-content-selectData">
                {resultDATA}
            </div>
        );
    }
});

ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);